{% extends "airflow/master.html" %}

{% block title %}Airflow - DAGs{% endblock %}

{% block head_css %}
{{ super() }}
<link href="{{ url_for("static", filename="dataTables.bootstrap.css") }}" rel="stylesheet" type="text/css" >
<link href="{{ url_for("static", filename="bootstrap-toggle.min.css") }}" rel="stylesheet" type="text/css">
{% endblock %}

{% block body %}
  <h2>DAGs</h2>

  <div id="main_content" style="display:none;">
    <table id="dags" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th></th>
                <th width="12"><span id="pause_header"class="glyphicon glyphicon-info-sign" title="Use this toggle to pause a DAG. The scheduler won't schedule new tasks instances for a paused DAG. Tasks already running at pause time won't be affected."></span></th>
                <th>DAG</th>
                <th>Owner</th>
                <th style="padding-left: 5px;">Statuses
                  <img id="loading" width="15" src="{{ url_for("static", filename="loading.gif") }}">
                </th>
                <th class="text-center">Links</th>
            </tr>
        </thead>
        <tbody>
        {% for dag_id in all_dag_ids %}
            {% set dag = dags[dag_id] if dag_id in dags else None %}
            <tr>
                <td class="text-center" style="width:10px;">
                    {% if dag_id in orm_dags %}
                    <a href="/admin/dagmodel/edit/?id={{ dag_id }}" title="Info">
                        <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                    </a>
                    {% endif %}
                </td>
                <td>
                  {% if dag_id in orm_dags %}
                    <input id="toggle-{{ dag_id }}" dag_id="{{ dag_id }}" type="checkbox" {{ "checked" if not orm_dags[dag_id].is_paused else "" }} data-toggle="toggle" data-size="mini">
                  {% endif %}
                </td>
                <td>
                    {% if dag %}
                    <a href="{{ url_for('airflow.graph', dag_id=dag.dag_id) }}">
                        {{ dag_id }}
                    </a>
                    {% else %}
                        {{ dag_id }}
                        <span class="glyphicon glyphicon-info-sign" class="info" aria-hidden="true" title="This DAG isn't available in the web server's DagBag object. It shows up in this list because the scheduler marked it as active in the metdata database."></span>
                    {% endif %}
                    {% if dag_id not in orm_dags and False %}
                        <span class="glyphicon glyphicon-info-sign" class="info" aria-hidden="true" title="This DAG seems to be existing only locally. The master scheduler doesn't seem to be aware of its existence."></span>
                    {% endif %}
                </td>
                    <td>{{ dag.owner if dag else orm_dags[dag_id].owners }}</td>
                <td style="padding:0px; width:180px; height:10px;">
                    <svg height="10" width="10" id='{{ dag.safe_dag_id }}' style="display: block;"></svg>
                </td>
                <td class="text-center" style="width:160px;">
                {% if dag %}
    <a href="{{ url_for("airflow.tree", dag_id=dag.dag_id, num_runs=25) }}" title="Tree View">
        <span class="glyphicon glyphicon-tree-deciduous" aria-hidden="true"></span>
    </a>
    <a href="{{ url_for("airflow.graph", dag_id=dag.dag_id) }}" title="Graph View">
        <span class="glyphicon glyphicon-certificate" aria-hidden="true"></span>
      </a>
    <a href="{{ url_for("airflow.duration", dag_id=dag.dag_id) }}" title="Tasks Duration">
        <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>
    </a>
      <a href="{{ url_for("airflow.landing_times", dag_id=dag.dag_id) }}" title="Landing Times">
        <span class="glyphicon glyphicon-plane" aria-hidden="true"></span>
      </a>
      <a href="{{ url_for("airflow.gantt", dag_id=dag.dag_id) }}" title="Gantt View">
        <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
        <i class="icon-align-left"></i>
      </a>
      <a href="{{ url_for("airflow.code", dag_id=dag.dag_id) }}" title="Code View">
        <span class="glyphicon glyphicon-flash" aria-hidden="true"></span>
      </a>
      <a href="/admin/log/?sort=1&desc=1&flt1_dag_id_equals={{ dag.dag_id }}">
         <i class="icon-list"></i>
         <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>
      </a>
                {% endif %}
                    <a href="{{ url_for("airflow.refresh", dag_id=dag_id) }}" title="Refresh">
                      <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                    </a>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
  </div>
{% endblock %}

{% block tail %}
  {{ super() }}
  <script src="{{ url_for('static', filename='d3.v3.min.js') }}"></script>
  <script src="{{ url_for('static', filename='jquery.dataTables.min.js') }}"></script>
  <script src="{{ url_for('static', filename='dataTables.bootstrap.js') }}"></script>
  <script src="{{ url_for('static', filename='bootstrap-toggle.min.js') }}"></script>
  <script>
      all_dags = $("[id^=toggle]");
      $.each(all_dags, function(i,v) {
        $(v).change (function() {
          var dag_id =  $(v).attr('dag_id');
          if ($(v).prop('checked')) {
            is_paused = 'true'
          } else {
            is_paused = 'false'
          }
          url = 'airflow/paused?is_paused=' + is_paused + '&dag_id=' + dag_id;
          $.ajax(url);
        });
      });
      $('#dags').dataTable({
        "iDisplayLength": 500,
        "bSort": false,
      });
      $("#main_content").show(250);
      diameter = 25;
      circle_margin = 4;
      stroke_width = 2;
      stroke_width_hover = 6;
      d3.json("{{ url_for('airflow.dag_stats') }}", function(error, json) {
        for(var dag_id in json) {
            states = json[dag_id];
            g = d3.select('svg#' + dag_id)
              .attr('height', diameter + (stroke_width_hover * 2))
              .attr('width', '180px')
              .selectAll("g")
              .data(states)
              .enter()
              .append('g')
              .attr('transform', function(d, i) {
                x = (i * (diameter + circle_margin)) + (diameter/2 + circle_margin);
                y = (diameter/2) + stroke_width_hover;
                return 'translate(' + x + ',' + y + ')';
              });

            g.append('text')
              .attr('fill', 'black')
              .attr('text-anchor', 'middle')
              .attr('vertical-align', 'middle')
              .attr('font-size', 8)
              .attr('y', 3)
              .text(function(d){ return d.count > 0 ? d.count : ''; });

            g.append('circle')
              .attr('stroke-width', function(d) {
                  if (d.count > 0)
                    return stroke_width;
                  else {
                    return 1;
                  }
              })
              .attr('stroke', function(d) {
                  if (d.count > 0)
                    return d.color;
                  else {
                    return 'gainsboro';
                  }
              })
              .attr('fill-opacity', 0)
              .attr('r', diameter/2)
              .attr('title', function(d) {return d.state})
              .attr('style', function(d) {
                if (d.count > 0)
                    return"cursor:pointer;"
              })
              .on('click', function(d, i) {
                  if (d.count > 0)
                    window.location = "/admin/taskinstance/?flt1_dag_id_equals=" + d.dag_id + "&flt2_state_equals=" + d.state;
              })
              .on('mouseover', function(d, i) {
                if (d.count > 0) {
                    d3.select(this).transition().duration(400)
                      .attr('fill-opacity', 0.3)
                      .style("stroke-width", stroke_width_hover);
                }
              })
              .on('mouseout', function(d, i) {
                if (d.count > 0) {
                    d3.select(this).transition().duration(400)
                      .attr('fill-opacity', 0)
                      .style("stroke-width", stroke_width);
                }
              })
              .style("opacity", 0)
              .transition()
              .duration(500)
              .delay(function(d, i){return i*50;})
              .style("opacity", 1);
            d3.select("#loading").remove();
        }
        $("#pause_header").tooltip();

        $("circle").tooltip({
          html: true,
          container: "body",
        });
    });
  </script>
{% endblock %}
